<template>
  <div class="box">
    <div class="top">
      <van-nav-bar
        title="购物车"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="mian">
      <div class="nothing" v-if="isShopShow">
        <van-empty description="描述文字" />
      </div>
      <div class="everything" v-else>
        <!-- 自己造一个name对cartid进行传值 -->
        <van-swipe-cell
          v-for="item in shoplist"
          :key="item.proid"
          :name="item.cartid"
        >
          <van-checkbox
            v-model="item.flag"
            @click="onflag(item.cartid, item.flag)"
          ></van-checkbox>
          <van-card
            :price="item.originprice * item.num"
            :title="item.proname"
            :thumb="item.img1"
          >
            <template #footer>
              <van-stepper
                v-model="item.num"
                theme="round"
                button-size="22"
                disable-input
                @change="changeNum(item)"
              />
            </template>
          </van-card>
          <template #right>
            <van-button
              @click="removelist(item, item.cartid)"
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <div class="footer">
      <van-submit-bar :price="num" button-text="去结算" @submit="onSubmit">
        <van-checkbox v-model="isAll">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>
<!-- 更新添加减少的接口，删除的接口，详情页面添加商品list接口 -->
<script>
// import { Dialog } from "vant";

import {
  GetCartlist,
  removeCartList,
  ChangeNum,
  AllCartChecked,
  IsCartChecked,
  postAddBarData,
  DelOrder
} from "../request/api";

export default {
  data() {
    return {
      isShopShow: false,
      stepperVal: 1,
      shoplist: [],
      cartids: "",
      // isAll: false,
      name: "Cart",
     
    };
  },

  // 计算属性将上面的复选框和全选框相关联
  // 住建局房屋租赁处
  // 029-89625818
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit() {
      this.$router.push("/order/dobar");
      postAddBarData({
        token: localStorage.getItem("token"),
        userid: localStorage.getItem("userid"),
      }).then((res) => {
        localStorage.setItem("time", res.data.time);
        console.log(res.data.time);
      });
   
    },
    // 得到响应数据
    getCartList() {
      GetCartlist({
        token: localStorage.getItem("token"),
        userid: localStorage.getItem("userid"),
      }).then((res) => {
        console.log(res.data.data);
        if (res.data.code == 200) {
          this.isShopShow = false;
          this.shoplist = res.data.data;
          this.cartids = res.data.data[0].cartid;
        } else {
          this.isShopShow = true;
        }
      });
    },
    beforeClose({ name }) {
      console.log(name);
    },
    // let counts = this.$refs.sku.getSkuData().selectedNum;
    // 绑定值发生改变
    changeNum(item) {
      ChangeNum({
        token: localStorage.getItem("token"),
        cartid: item.cartid.toString(),
        num: item.num,
      }).then((res) => {
        console.log(res);
      });
    },
    // 删除之后，进行刷新更新页面
    removelist(item, cartid) {
      removeCartList({
        token: localStorage.getItem("token"),
        cartid: item.cartid.toString(),
      }).then((res) => {
        if (res.data.code == 200) {
          // Dialog({ message: "确认删除" });
          // this.shoplist = this.shoplist.filter(
          //   (item) => item.cartid.toString() !== cartid
          // );
          this.getCartList();
        }
        console.log(res);
      });
    },

    // 选定单个
    onflag(cartid, flag) {
      IsCartChecked({
        token: localStorage.getItem("token"),
        // cartid: item.cartid.toString(),
        // flag: item.flag,
        cartid: cartid,
        flag: flag,
      }).then((res) => {
        console.log(res);
      });
    },
  },
  // 提交订单
  // onSubmit() {
  // },
  // 选定所有
  computed: {
   
    isAll: {
      set(val) {
        console.log(val);
        this.shoplist.forEach((item) => (item.flag = val));
        AllCartChecked({
          userid: localStorage.getItem("userid"),
          type: val,
        }).then((res) => {
          console.log(res);
        });
      },
      get() {
         //getter方法决定了 isAll 是上面全部选中 isAll结果就是true，  有一个是false，isAll就是false
        // every检测数组所有元素是否都符合指定条件
        return this.shoplist.every((item) => item.flag == true);
      },
    },
    num: {
      set(val) {
        console.log(val);
      },
      get() {
        var num = 0;
        this.shoplist.forEach((item) => {
          if (item.flag) {
            num += item.originprice * item.num * 100;
          }
        });
        return num;
      },
    },
  },

  // 判断用户是否登陆，如果有token则发请求；
  created() {
    if (!localStorage.getItem("token")) {
      this.$router.push("/login");
    } else {
      this.getCartList();
    }
  },
};
</script>
<style scoped>
.delete-button {
  height: 100%;
}
::v-deep .van-swipe-cell__wrapper {
  display: flex;
  background-color: #fff;
}
::v-deep .van-checkbox {
  width: 0.3rem;
}
::v-deep .van-card {
  flex: 1;
  background-color: #fff;
}
.van-submit-bar {
  bottom: 44px;
}
</style>